<template lang="pug">
  .wrap
    .eventhand-topbar
      .event-number
        .event-number-item(
          v-for="(item, index) of statusList"
          :key="index"
          @click="changeStatusItem(item, index)")
          .number-title(v-text="item.chsStatus")
          .number-content(v-text="item.count")
      .event-level
        .event-level-item(
          v-for="(item, index) of levelList"
          :key="index"
          v-bind:style="(index === 0) ? 'background-color:#fc656c;' : ((index === 1) ? 'background-color:#fdac29;' : 'background-color: #2ab2fc;')"
          @click="changePoliceItem(item, index)")
          .level-titel(v-text="item.chsLevel")
          .level-content(v-text="item.count")
      //- router-link(to='/warnConfig')
      //-   button.btn.btn-complete 告警规则
      // .event-filter
      //   SmartForm(
      //     inline
      //     :buttonList="buttonList"
      //     :columns="filterColumns"
      //     :formList="formList"
      //   )
    .eventhand-content
      .event-list
        ul.menu
          li.list-item(
            v-for="(item, index) of relation.eventType"
            :key="index"
            :class="{'list-active':(activeItemId==index)}"
            @click="changeTypeItem(item,index)")
            .item-left(v-text="item.label")
            .item-right {{item.value|eventCountFilter(eventTypeList)}}
      .event-container
        DataTablePage(
          ref="table"
          resource="pn/monitor/event"
          style="height: 700px"
          :columns="columns"
          :tableWidth="tableWidth"
          :tableInitList="tableInitList"
          :tableFullList="tableFullList"
          :filterByAlways="filterByAlways")
</template>

<script>
import { keyBy, sumBy } from 'lodash'
import DataTablePage from '@/containers/DataTablePage'
import SmartForm from '@/components/SmartForm'
// import {mapGetters} from 'vuex'
export default {
  components: {
    DataTablePage,
    SmartForm
  },
  data () {
    return {
      // 页面需要的relation字段名
      relationList: ['eventLevel', 'eventStatus', 'eventType'],
      relation: {},
      // 事件处理页面获取到的所有数据
      statusList: [],
      levelList: [],
      eventTypeList: [],
      filterByAlways: {},
      temp: {},
      columns: {
        id: {
          label: '事件编号',
          form: {
            type: 'input'
          }
        },
        eventName: {
          label: '事件名称',
          form: {
            type: 'input'
          }
        },
        eventType: {
          label: '事件类型',
          form: {
            type: 'input'
          },
          filter: {},
          relation: 'eventType',
          render: {
            type: 'select'
          }
        },
        eventLevel: {
          label: '事件等级',
          form: {
            type: 'input'
          },
          filter: {},
          relation: 'eventLevel',
          render: {
            type: 'select'
          }
        },
        userName: {
          label: '用户名称',
          form: {
            type: 'input'
          }
        },
        longitude: {
          label: '经度',
          form: {
            type: 'number'
          }
        },
        latitude: {
          label: '纬度',
          form: {
            type: 'number'
          }
        },
        status: {
          label: '处理状态',
          form: {
            type: 'input'
          },
          filter: {},
          relation: 'eventStatus',
          render: {
            type: 'select'
          }
        },
        createUserId: {
          label: '创建人',
          form: {
            type: 'number'
          },
          relation: 'users',
          render: {
            type: 'select'
          }
        },
        createTime: {
          label: '创建时间',
          form: {
            type: 'date'
          },
          filter: {
            type: 'date'
          },
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm:ss'
        },
        updateUserId: {
          label: '修改人',
          form: {
            type: 'number'
          },
          relation: 'users',
          render: {
            type: 'select'
          }
        },
        updateTime: {
          label: '修改时间',
          form: {
            type: 'date'
          },
          filter: {
            type: 'date'
          },
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm:ss'
        },
        deviceId: {
          label: '设备id',
          form: {
            type: 'number'
          }
        },
        eventDescribe: {
          label: '事件描述',
          form: {
            type: 'input'
          }
        },
        processUserId: {
          label: '处理人',
          form: {
            type: 'number'
          },
          relation: 'users',
          render: {
            type: 'select'
          }
        },
        processRemark: {
          label: '处理意见',
          form: {
            type: 'input'
          }
        },
        remark: {
          label: '备注',
          form: {
            type: 'input'
          }
        },
        position: {
          label: '经纬 度',
          form: {
            type: 'input'
          },
          html: true,
          minLength: 99999999,
          render: () => {
            // const temp = require('@/pages/monitor/assets/img/map-blue.png')
            // return `<img src="${temp}" style="width:18px;"/>`
            return `<img src="'' style="width:18px;"/>`
          }
        }
      },
      tableInitList: ['eventName', 'eventType', 'eventLevel', 'eventDescribe', 'position', 'status', 'processUserId', 'processRemark', 'remark', 'createUserId', 'createTime', 'updateUserId', 'updateTime'],
      tableFullList: ['eventName', 'eventType', 'eventLevel', 'eventDescribe', 'position', 'status', 'processUserId', 'processRemark', 'remark', 'createUserId', 'createTime', 'updateUserId', 'updateTime'],
      tableWidth: document.body.clientWidth - 480,
      activeItemId: 0
      // SmartForm筛选框
      // filterColumns: {
      //   section: {
      //     label: '区间',
      //     form: {
      //       type: 'input'
      //     }
      //   }
      // },
      // formList: ['section', 'section'],
      // buttonList: [{
      //   name: 'search',
      //   label: '搜索',
      //   validate: true
      //   // func: ({funcProps}) => {
      //   //   const { formValues } = funcProps.form
      //   //   // console.log(cloneDeep(formValues))
      //   //   this.$emit('changeFilterBy', cloneDeep(formValues))
      //   // }
      // }]
    }
  },
  // TODO 表格宽度自适应
  // computed: {
  //   ...mapGetters([
  //     'menuActive',
  //     'clientHeight'
  //   ])
  //   tableWidth () {
  //     return this.clientWidth - (this.menuActive ? 210 : 0) - ((this.clientWidth > 991) ? 70 : 0) - 40 - 545
  //   }
  // },
  created () {
    // 顺序执行 防止请求异步完成
    this.getRelation(() => {
      this.getData()
    })
  },
  methods: {
    // 获取事件处理页面的数据
    getData () {
      this.$get({
        url: 'pn/monitor/event/eventCount'
      }).then((data) => {
        this.statusList = data.status
        this.levelList = data.level
        this.eventTypeList = keyBy(data.eventType, 'eventType')
        this.conversion()
      })
    },
    // 获取事件处理页面需要的三个relation
    getRelation (callback) {
      this.$getRelation({
        relations: this.relationList.join(',')
      }).then((data) => {
        this.relation = {
          ...data,
          eventType: [
            {
              label: '全部',
              value: 'ALL'
            },
            ...data.eventType
          ]
        }
        callback()
      })
    },
    // 将英文的字段显示转换为中文
    conversion () {
      this.levelList.map(value => {
        if (!this.relation.eventLevel) return
        let cur1 = this.relation.eventLevel.find(item => {
          return item.value === value.eventLevel
        })
        if (cur1) {
          this.$set(value, 'chsLevel', cur1.label)
          // value.chsLevel = cur1.label
        }
      })
      // this.eventValues.eventType.map(value => {
      //   let cur2 = this.relation.eventType.find(item => {
      //     return item.value === value.eventType
      //   })
      //   if (cur2 !== 'undefined') {
      //     value.eventType = cur2.label
      //   }
      // })
      this.statusList.map(value => {
        let cur3 = this.relation.eventStatus.find(item => {
          return item.value === value.status
        })
        if (cur3 !== 'undefined') {
          this.$set(value, 'chsStatus', cur3.label)
        }
      })
    },
    // 切换左边选项过滤数据
    changeTypeItem (item, index) {
      if (item.value === 'ALL') {
        this.$delete(this.filterByAlways, 'eventType')
        this.$delete(this.filterByAlways, 'eventLevel')
        this.$delete(this.filterByAlways, 'status')
      } else {
        this.$delete(this.filterByAlways, 'eventLevel')
        this.$delete(this.filterByAlways, 'status')
        this.$set(this.filterByAlways, 'eventType', item.value)
      }
      this.$refs.table.getData()
      this.activeItemId = index
    },
    // 切换预警按钮
    changePoliceItem (item, index) {
      this.$set(this.filterByAlways, 'eventLevel', item.eventLevel)
      this.$refs.table.getData()
    },
    // 切换事件状态选项
    changeStatusItem (item, index) {
      this.$set(this.filterByAlways, 'status', item.status)
      this.$refs.table.getData()
    }
  },
  mounted () {
    this.clientWidth = window.innerWidth
    const that = this
    window.onresize = () => {
      window.screenWidth = document.body.clientWidth
      that.tableWidth = window.screenWidth - 545
    }
  },
  filters: {
    eventCountFilter (value, eventType) {
      if (value === 'ALL') {
        return sumBy(Object.keys(eventType), (item) => eventType[item].count)
      }
      const result = eventType[value] ? eventType[value].count : 0
      return result
    }
  }
}
</script>

<style lang="sass" scoped>
.wrap
  width: 100%
  .eventhand-topbar
    display: flex
    padding: 15px 0 0 28px
    background-color: #fff
    height: 86px
    box-shadow: 1px 1px 5px #c0c4cc
    position: relative
    z-index: 5
    .event-number
      display: flex
      .event-number-item
        width: 75px
        height: 54px
        margin-right: 10px
        padding: 5px 10px
        text-align: center
        .number-title
          color: #787878
        .number-content
          font-weight: 700
          font-size: 20px
          color: #222222
          cursor: pointer
    .event-level
      display: flex
      margin-left: 30px
      .event-level-item
        color: #fff
        width: 110px
        height: 58px
        border-radius: 7px
        margin-right: 10px
        padding: 5px 10px
        cursor: pointer
        .level-title
        .level-content
          font-weight: 700
          font-size: 20px
    .event-filter
      display: flex
      margin-left: 280px
      padding: 15px
      .filter-one
        margin-right: 10px
        span.one
          display: inline-block
          margin-right: 5px
      .filter-two
        margin-right: 10px
        span.two
          display: inline-block
          margin-right: 5px
  .eventhand-content
    display: flex
    margin-bottom: 5px
    .event-list
      background-color: #fff
      border-top: 20px solid rgb(249,248,248)
      position: relative
      z-index: 4
      .list-item
        display: flex
        width: 210px
        height: 50px
        padding: 10px 15px
        justify-content: space-around
        border-bottom: 2px solid #eeeeee
        &:hover
          box-shadow: 0px 0px 5px #c0c4cc
          border-left: 8px solid #2ab2fc
          border-bottom: 0
          cursor: pointer
          .item-right
            background-color: #2ab2fc
        .item-left
        .item-right
          width: 46px
          height: 23px
          border-radius: 10px
          background-color: #e3e3e3
          color: #fff
          text-align: center
          line-heigth: 20px
      .list-active
        box-shadow: 0px 0px 5px #c0c4cc
        padding-left:
        border-left: 8px solid #2ab2fc
        cursor: pointer
        .item-right
          background-color: #2ab2fc
    .event-container
      background-color: #f9f8f8
      marin: auto
      /deep/ .main
        display: flex
        padding-top: 10px
        padding-left: 15px
        /deep/.table-wrapper
          border: none!important
        /deep/.table-footer
          .page
            margin-left: 20px
          /deep/.column-filter
            display: none
</style>
